<template>
  <div style="background-color: #ffffff;width: 100%;height: 100%;">
    <div class="pageHead" @click="back">
    管理 >> <span>任命评委</span>
  </div>
  <div class="body">
  <a-input-search :style="{width:'320px'}" placeholder="Please enter something" button-text="Search" search-button/>
      <a-tabs type="rounded" size="mini">
      <a-tab-pane key="1" title="Tab 1">
          <a-tag checkable size="large" color="arcoblue" :default-checked="true">已选名单</a-tag>
<div class="divider">

</div>

              <a-table :columns="columns" :data="data">
    <template #optional="{ record }">
      <a-button @click="" type = "outline">view</a-button>
    </template>
  </a-table>
          <a-tag checkable size="large" color="green" :default-checked="true">已选名单</a-tag>
              <div class="divider">
              </div>
              <a-table :columns="columns" :data="data">
    <template #optional="{ record }">
      <a-button @click="" type = "outline">view</a-button>
    </template>
  </a-table>
      </a-tab-pane>
      <a-tab-pane key="2" title="Tab 2">
        Content of Tab Panel 2
      </a-tab-pane>
      <a-tab-pane key="3" title="Tab 3">
        Content of Tab Panel 3
      </a-tab-pane>
    </a-tabs>
  </div>

  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {ref} from "vue";

const router = useRouter()
const back = () => {
  router.back()
}
  const show = ref(true)

    const columns = [{
      title: 'Name',
      dataIndex: 'name',
    }, {
      title: 'Salary',
      dataIndex: 'salary',
    }, {
      title: 'Address',
      dataIndex: 'address',
    }, {
      title: 'Email',
      dataIndex: 'email',
    }, {
      title: 'Optional',
      slotName: 'optional'
    }];
    const data = [{
      key: '1',
      name: 'Jane Doe',
      first: 'Jane',
      last: 'Doe',
      salary: 23000,
      address: '32 Park Road, London',
      email: 'jane.doe@example.com'
    }, {
      key: '2',
      name: 'Alisa Ross',
      first: 'Alisa',
      last: 'Ross',
      salary: 25000,
      address: '35 Park Road, London',
      email: 'alisa.ross@example.com'
    }, {
      key: '3',
      name: 'Kevin Sandra',
      first: 'Kevin',
      last: 'Sandra',
      salary: 22000,
      address: '31 Park Road, London',
      email: 'kevin.sandra@example.com'
    }, {
      key: '4',
      name: 'Ed Hellen',
      first: 'Ed',
      last: 'Hellen',
      salary: 17000,
      address: '42 Park Road, London',
      email: 'ed.hellen@example.com'
    }, {
      key: '5',
      name: 'William Smith',
      first: 'William',
      last: 'Smith',
      salary: 27000,
      address: '62 Park Road, London',
      email: 'william.smith@example.com'
    }];
</script>


<style scoped lang="less">
.pageHead {
  font-size: 14px;
  color: #A8ABB2;
  margin: 20px;

  span {
    color: #409EFF;
  }
}
.body{
  display: flex;
  flex-direction: column;
  align-items: center;

  .arco-tabs{
    margin:20px;
  }
 .divider{
   height: 10px;
 }
}

</style>